<template>
  <div style="position: absolute; height: 100%; width: 100%;">
    <el-container>
      <el-header>
        <div style="margin-top: 10px; text-align: right; padding-right: 30px">
          <el-button size="mini" @click="showAddRole=true" v-permission='"4622a6c2be51496f8ec909d0356c1d31"'>新增角色</el-button>
        </div>
      </el-header>
      <el-main>
          <el-table
            :data="roleData"
            border
            style="width: 100%">
            <el-table-column prop="roleName" label="角色名称" align="center">
            </el-table-column>
            
            <el-table-column prop="status" label="状态" align="center">
              <template slot-scope="scope">
                <span>{{ scope.row.status | statusFilter }}</span>
              </template>
            </el-table-column>
            
            <el-table-column prop="createUser" label="创建人" align="center">
            </el-table-column>
            
            <el-table-column prop="createTime" label="创建时间" align="center">
              <template slot-scope="scope">
                    <i class="el-icon-date"/>
                    {{ scope.row.createTime | dateFilter }}
              </template>
            </el-table-column>

            <el-table-column label="操作" align="center" width="355">
              <template slot-scope="scope">
                <el-button size="mini" @click="selectedRole=scope.row; showUpdateRole=true" v-permission='"50bb3dd0edb14a36914048501deb9591"'>修改</el-button>
                <el-button size="mini" type="danger" @click="deleteRole(scope.$index, scope.row)" v-permission='"abd83ae51d7c421b85231a2dac276c31"'>删除</el-button>
                <el-button size="mini" type="danger" v-if="scope.row.status == 0" @click="stautsShow(scope.$index, scope.row)" v-permission='"f24b5395621d4388a1577fd0ef1206ef"'>启用</el-button>
                <el-button size="mini" type="warning" v-if="scope.row.status == 1" @click="stautsShow(scope.$index, scope.row)" v-permission='"f24b5395621d4388a1577fd0ef1206ef"'>停用</el-button>
                <el-button size="mini" type="warning" @click="selectedRoleDeploy=scope.row; showAddRoleDeploy=true" v-permission='"255366105198468baf8f1f5031411196"'>权限配置</el-button>
              </template>
            </el-table-column>
          </el-table>
      </el-main>

    </el-container>

    <el-dialog title="添加角色" :visible.sync="showAddRole">
      <addRole v-if="showAddRole" @refresh="getRoleTablePage" @closeDialog="showAddRole = false"/>
    </el-dialog>

    <el-dialog title="修改用户" :visible.sync="showUpdateRole">
      <updateRole v-if="showUpdateRole" :row="selectedRole" @refresh="getRoleTablePage" @closeDialog="showUpdateRole = false"/>
    </el-dialog>

    <el-dialog title="权限配置" :visible.sync="showAddRoleDeploy">
      <roleDeploy v-if="showAddRoleDeploy" :id="selectedRoleDeploy.roleId"  @refresh="getRoleTablePage" @closeDialog="showAddRoleDeploy = false"/>
    </el-dialog>

  </div>
</template>

<script>
import request from '@/utils/request'
import addRole from './components/addRole.vue';
import updateRole from './components/updateRole.vue';
import roleDeploy from './components/roleDeploy.vue';
import qs from 'qs';
import axios from 'axios'
import { formatDate } from '@/utils/formatDate.js'


export default {
  components: { addRole, updateRole,roleDeploy },
  filters: {
    statusFilter(status) {
      if (status == 0) {
        return '停用'
      }
      if (status == 1) {
        return '正常'
      }
    },
    dateFilter(date) {
      // return formatDate(new Date(date), 'yyyy-MM-dd hh:mm:ss')
      if (date != null && date != '') {
        return formatDate(new Date(date), 'yyyy-MM-dd')
      } else {
        return ''
      }
     }
  },
  data() {
    return {
       roleData: [],
      showAddRole: false,
      showUpdateRole: false,
      showAddRoleDeploy: false,
      listLoading: true,
      selectedRoleDeploy:null,
      pageInfo: [
        
              {username:'sun',
              account:'123456',
              roleName:'管理员'}
  
  
      ],
      selectedRole: null,
      options: [],
      searchDate: [],
      searchData: {}
    }
  },
  created() {
    this.getRoleTablePage()
  },
  methods: {
    getRoleTablePage() {
      this.listLoading = true;
      var userId = sessionStorage.getItem("userId");
      var token = sessionStorage.getItem("token");
      axios({
        url: '/sysRole/queryAllRole',
        method: 'post',
        data: qs.stringify({token: token, userId: userId})
      }).then((res) => {
        this.roleData = res.data.data
        this.listLoading = false
      }).catch(() => {

      })
    },
    deleteRole(index, row) {
      this.$confirm('确认删除？')
        .then(_ => {
          var userId = sessionStorage.getItem("userId");
          var userName = sessionStorage.getItem("userName");
          var token = sessionStorage.getItem("token");
          axios({
            url: '/sysRole/deleteRoleById',
            method: 'post',
            data: qs.stringify({ token: token, userId: userId, uName: userName, roleId:row.roleId }),
          }).then((res) => {
            if(res.data.status == 200){
                this.$message(res.data.data);
                this.getRoleTablePage();
            }
          }).catch(_ => {})
        }).catch(_ => {});
    },
    stautsShow(index, row){
      var userId = sessionStorage.getItem("userId");
      var userName = sessionStorage.getItem("userName");
      var token = sessionStorage.getItem("token");
      axios({
        method:'post',
        url:'/sysRole/isUse',
        data:qs.stringify({ token: token, userId: userId, uName: userName,roleId: row.roleId, status: row.status})
      }).then((res) => {
        if( res.data.status == 200){
          this.$message(res.data.data)
          this.getRoleTablePage();
        }else{
          this.$message(res.data.data)
        }
      })
    }
    // getSearchDate(date) {
    //   if (date != null) {
    //     this.searchData.startTime = new Date(date[0])
    //     this.searchData.endTime = new Date(date[1])
    //   } else {
    //     this.searchData.startTime = null
    //     this.searchData.endTime = null
    //   }
    // }
  }
}
</script>
<style scoped>
  html, body {
      height:100%;
    }
    .el-container {
      height: 100%;
      display: flex;
      flex-direction: column;
      width: 100%;
      position: absolute;
      top: 0;
      left:0;
    }
    .el-header {
      margin-top: 10px;
      height: auto !important;
      min-height: 60px !important;
      flex-grow: 0;
      flex-shrink: 0;
    }
    .el-footer {
      text-align: center;
      padding: 14px 6px;
    }
    .el-main {
      height: 100%;
      padding: 10px !important;
      flex-grow: 1;
      flex-shrink: 1;
      overflow-y: auto;
    }
    .searchBtn {
      position: absolute;
      right: 30px;
    }
  /*  /deep/ .el-dialog__body{
      height: 85vh;
      overflow-y: auto;
    } */
</style>
